__version__ = '0.0.1';

'use strict';

startup();

function append_html(html) {
    $("body").append(html);
};

function startup() {
    append_html(`
    <button id="connectButton">Connect</button>
    <button id="disconnectButton" disabled>Disconnect</button>
    `)
    $('#connectButton').click(connect);
    $('#disconnectButton').click(disconnect);
}

let core_node;
function connect(e) {
    $('#connectButton').attr("disabled",true);
    $('#disconnectButton').attr("disabled",false);

    // 设置UI
    append_html(`
    <div id="exchange_area">
        <div id="core_node_keys">

        </div>
        <textarea id="input_key_textarea"></textarea>
        <button id="confirm_input_key_btn" disabled>确认传入</button>
    </div>
    `);
    

    $(`#input_key_textarea`).change(() => { $(`#confirm_input_key_btn`).attr("disabled", false); });
    $(`#confirm_input_key_btn`).click(async ()=>{
        const input_key = JSON.parse($(`#input_key_textarea`).val());
        await core_node._recive_one_key(input_key);
    });

    core_node = new DataNode(name = 'core_node');

    core_node._send_one_key = (combined_key) => {

        if ($(`#${combined_key.target_id}node_key`).length == 0){
            key_html = `
            <div id="${combined_key.target_id}node_key">
                <div class="target_id" style="background-color:#00FFFF">用户名:${combined_key.target_id}</div>
                <div class="offer_key" style="border-style: outset;"></div>
                <div class="answer_key" style="border-style: outset;"></div>
                <div class="state" background-color:#FFFF99"></div>
                <button class="close_btn" >关闭</button>
                <button class="delete_btn" disabled>删除</button>
                <div class="more_info"></div>
            </div>
            `
            $('#core_node_keys').append(key_html);
            
            $(`#${combined_key.target_id}node_key .close_btn`).click((e)=>{
                core_node._close_one_target(combined_key.target_id);
                $(`#${combined_key.target_id}node_key .close_btn`).attr('disabled',true);
                $(`#${combined_key.target_id}node_key .delete_btn`).attr('disabled',false);
            });
    
            $(`#${combined_key.target_id}node_key .delete_btn`).click((e)=>{
                $(`#${combined_key.target_id}node_key`).remove();
            });
        };

        let key = JSON.stringify(combined_key);
        switch (combined_key.state){
            case "new":
                
                break;
            case "connecting":
                break;
            case "connected":
                key = "";
                break;
            case "failed":
                
                break;
            case "disconnected":
                key = "";
                break;
            case "closed":
                key = "";
                $(`#${combined_key.target_id}node_key .delete_btn`).attr('disabled',false);
                break;
            case null:
                $(`#${combined_key.target_id}node_key`).remove();
                break;
            default:
                log(`未知的combined_key.state:${combined_key.state}`);
        };
        switch (combined_key.desc.type){
            case "offer":
                $(`#${combined_key.target_id}node_key .offer_key`).html(key);
                break;
            case "answer":
                $(`#${combined_key.target_id}node_key .answer_key`).html(key);
                break;
        };

        $(`#${combined_key.target_id}node_key .state`).html(`连接状态:${combined_key.state}`);
        

    };

    core_node.onopen = (e) => {
        $(`#${e.target.remote_id+'node_key'} .more_info`).html("datachannel已建立");
    };
    core_node.onclose = (e) => {
        $(`#${e.target.remote_id+'node_key'} .more_info`).html("datachannel已关闭");
    };
    // core_node.DataRecivers = {};
    core_node.onMessage = (event) => {
        // for (name in DataRecivers){
        //     core_pc.DataRecivers[name](event.data);
        // }
    };

    init_chat();
};

function disconnect() {
    // Close the RTCPeerConnections
    core_node.close();
    core_node = null;
    $('#connectButton').attr("disabled",false);
    $('#disconnectButton').attr("disabled",true);

    $('#exchange_area').remove();
}

let chat_node;
function init_chat(){
    // 设置UI
    append_html(`
    <div id="chat_area">

        <div id="users">
        
        </div>

        <div id="chat_window" style="max-width: 500px; height:200px; overflow: scroll;"></div>

        <label for="message">Enter a message:
        <input type="text" id="message" placeholder="Message text"
                inputmode="latin" size=60 maxlength=120 disabled>
        </label>
        <button id="send_msg_btn" disabled>发送</button>
    </div>
    `);
    

    $(`#send_msg_btn`).click(async ()=>{
        const input_key = JSON.parse($(`#message`).val());
        if (input_key.length) {
            $(`#chat_window`).append(`
            <p>(自己):${input_key}</p>
            `);
            chat_node.send_msg(input_key,target_id);
        };
    });


    chat_node = new DataNode(name = 'chat_node');
}